<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止默认</title>
    <link rel="stylesheet" href="./dome6.css">
</head>
<body>
    <h1>####################</h1>
    <h1>####################</h1>
    <h1>####################</h1>
    <h1>####################</h1>
    <div id="menu">
        <div>
            自定义右键菜单栏
        </div>
    </div>
</body>
<script src="./jquery-3.6.3.js"></script>
<script>
    // 阻止右键显示菜单选项e
    $(document).contextmenu(function (e) {
        // 当用户zaiyemian鼠标右键时执行 获取鼠标位置
        let left = e.pageX;
        let top = e.pageY;
        $("#menu").css({
            "left":`${left}px`,
            "top":`${top}px`,
            "display":"block"
        })
        e.preventDefault();
    })
    // 制作鼠标左键监控
    $(document).mousedown(function(e) {
        $("#menu").hide()
    })
</script>
</html>